<template>
  <div class="container-dongtaiList">
    <el-row>
      <el-col :span="24">
        <p class="header-left-title">资讯列表</p>
      </el-col>
      <el-form :model="form"
               :inline="true">
        <el-col :span="24"
                class="mid-condition-box">
          <el-col :span="2"
                  class="mid-left-space">
            <el-col :span="24"
                    class="mid-query-dynamic-conditions">
              <el-button type="primary"
                         @click="addDynamic">
                <span class="mid-left-button">添加动态</span>
              </el-button>
            </el-col>
          </el-col>
          <el-col :span="22">
            <el-col :span="13">
              <el-col :span="24"
                      class="mid-center-timerange">
                <el-form-item id="midCenterUpdatTime"
                              label="更新时间段"
                              prop="name"
                              label-width="20%"
                              style="width:100%!important;">
                  <el-date-picker type="datetimerange"
                                  v-model="form.cs_time1"
                                  start-placeholder="开始时间"
                                  end-placeholder="结束时间"
                                  style="didsplay:block;width: 110.6%;"
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  @change="onChangeUpdateTime"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="4"
                    class="mid-right-select">
              <el-col :span="22"
                      class="mid-right-select-all">
                <el-select v-model="form.leimu"
                           placeholder="请选择"
                           style="width:100%"
                           @change="onChangeStandardSwit">
                  <el-option value=""
                             label="全部"></el-option>
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.name"
                             :value="item.code_id"></el-option>
                </el-select>
              </el-col>
              <el-col :span="2">&nbsp;</el-col>
            </el-col>
            <el-col :span="7">
              <div id="midRightButton">
                <el-input placeholder="按资讯标题查询"
                          v-model="form.title">
                  <el-button slot="append"
                             icon="el-icon-search"
                             @click="onSearch">查询</el-button>
                </el-input>
              </div>
            </el-col>
          </el-col>
        </el-col>
      </el-form>
      <el-col :span="24"
              class="bottom-table-box">
        <div class="el-table__body-wrapper is-scrolling-none">
          <el-table :data="tableData"
                    height="420"
                    :header-cell-style="{background:'#f5f5f5'}"
                    style="width:100%;">
            <el-table-column type="index"
                             label="序号"
                             align="center"
                             width="80px"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="title"
                             label="标题"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="type"
                             label="所属类目"
                             align="center"
                             :formatter="handleInfoTypeFilter"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="updated_at"
                             label="最后更新时间"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="created_at"
                             label="发布时间"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作"
                             width="268px"
                             align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-view"
                           :style="{'background':scope.row.is_release==1?'gray':'#409EFF','border-color':scope.row.is_release==1?'gray':'#409EFF'}"
                           :disabled="scope.row.is_release==1 ? true:false"
                           @click="onfabu(scope.row.cms_id)">发布</el-button>
                <el-button size="mini"
                           type="primary"
                           icon="el-icon-edit"
                           @click="onedit(scope.row.cms_id,scope.row.is_release)">修改</el-button>
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-close"
                           @click="ondelteaddfirm(scope.row.cms_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24"
              class="bottom-pagination-box">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-size="15"
                       layout="total,  prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
    <script>
import { pageComMaintainApi } from "@/services/SystemSetting";
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      type: "",
      options: [],
      tableData: [],
      input5: "",
      select: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      form: {
        leimu: "",
        cs_time1: "",
        start_time: "",
        end_time: "",
        title: ""
      }
    };
  },
  methods: {
    //模糊查询
    onSearch () {
      this.currentPage = 1;
      this.getDataList();
    },
    //添加公告事件
    addDynamic () {
      this.$router.push({ path: "addModifyDynamics" });
    },
    //时间改变事件
    onChangeUpdateTime (val) {
      //默认从第一页
      this.currentPage = 1;
      if (val == null) {
        this.form.start_time = "";
        this.form.end_time = "";
        this.getDataList();
      } else {
        this.form.start_time = val[0];
        this.form.end_time = val[1];
        this.getDataList();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    //发布
    onfabu (id) {
      this.$confirm("即将发布当前动态，是否继续!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          pageComMaintainApi.informationRelease({
            data: {
              id: id
            }
          }).then((res) => {
            if (res.code == 0) {
              this.getDataList();
            } else {
              this.$message.error(res.msg)
            }
          }).catch((error) => {
            console.log(error);
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消发布"
          });
        });
    },
    //编辑
    onedit (id, is_release) {
      this.$router.push({
        path: "addModifyDynamics",
        query: { cms_id: id, is_release: is_release }
      });
    },
    //确认删除
    ondelteaddfirm (id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        pageComMaintainApi.deleteInformation({
          data: {
            id: id
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getDataList();
          } else {
            this.$message.error(res.msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    //列表数据
    getDataList () {
      pageComMaintainApi
        .getConsultList({
          params: {
            is_delete: '',//1未删除2删除 不传全部
            is_release: '',//0未发布1已发布 不传全部
            search: this.form.title,//搜索内容    
            updated_start: this.form.start_time,//更新开始时间
            updated_end: this.form.end_time,//更新时间结束时间 
            category: this.type,//标准吗news_type传标准的value过去
            page: this.currentPage,//当前页
            per_page: 15,//默认一页显示15条
          }
        })
        .then(res => {
          if (res.data.data) {
            this.tableData = res.data.data;
            this.total = res.data.total;
          }
        });
    },
    //分页
    handleCurrentChange (page) {
      this.currentPage = page;
      this.getDataList();
    },
    //类目改变
    onChangeStandardSwit (val) {
      //默认从第一页
      this.currentPage = 1;
      if (val == '') {
        this.type = '';
        this.getDataList();
      } else {
        this.options.forEach(ele => {
          if (ele.code_id == val) {
            this.type = ele.value;
          }
        });
        this.getDataList();
      }
    },
    // 获取动态类型标准码
    getStandardCode () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "news_type"
          }
        }).then(
          res => {
            if (res.data) {
              this.options = res.data.list;
            }
          }, err => {
            console.log(err);
          }
        );
    },
    handleInfoTypeFilter (row) {
      var infoType;
      this.options.filter(item => {
        if (item.value == row.category) {
          infoType = item.name;
        }
      });
      return infoType;
    }
  },
  created () {
    //列表数据
    this.getDataList();
    // 获取动态类型标准码
    this.getStandardCode();
  }
};
</script>        
<style lang="scss"  scoped>
#midRightButton {
  margin-top: 20px;
  /deep/ .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 36px;
  }
  /deep/ .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: #409eff;
    background-color: #409eff;
    border-top: 0;
    border-bottom: 0;
    color: white;
    height: 36px !important;
    margin: 0px;
  }
  /deep/ .el-input-group__append {
    border-left: 0;
    height: 36px !important;
    padding: 0px !important;
    margin: 0px !important;
  }
}
.mid-right-select-all {
  /deep/ .el-select {
    display: inline-block;
    position: relative;
    height: 36px !important;
    line-height: 36px !important;
  }
  /deep/ .el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    height: 36px;
    line-height: 36px;
  }
}
.mid-query-dynamic-conditions {
  /deep/ .el-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    width: 80%;
    height: 36px;
    padding: 0px;
    margin: 0px;
  }
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    height: 36px !important;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }
}
.mid-left-space {
  padding: 20px 0;
  /deep/ .el-form-item {
    margin-bottom: 0px !important;
  }
}
#midCenterUpdatTime {
  /deep/.el-form-item__content {
    line-height: 36px;
    position: relative;
    font-size: 14px;
    width: 70% !important;
    height: 36px;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
  }
  /deep/ .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 400px;
    height: 36px;
    line-height: 36px;
  }
}
#searchstyle {
  /deep/ .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: #409eff !important;
    background-color: #409eff !important;
    color: inherit;
    border-top: 0;
    border-bottom: 0;
    color: white;
    width: 50%;
    height: 34px !important;
  }
}
.container-dongtaiList {
  .bottom-pagination-box {
    padding: 20px 0;
    text-align: center;
  }
  .bottom-table-box {
    min-height: 420px;
  }
  .mid-right-select {
    margin-top: 20px;
    margin-right: 0px !important;
  }
  .mid-center-timerange {
    margin-top: 20px;
  }
  .mid-left-button {
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .mid-condition-box {
    margin-top: -20px;
    background: #ffffff !important;
  }
  .header-left-title {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 18px;
    font-family: SimSun;
    font-weight: 400;
    color: rgba(20, 65, 179, 1);
    background: #ffffff !important;
  }
  /deep/ .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 70% !important;
  }
  padding: 10px 20px;
  background: #ffffff;
}
</style>